<template>
  <div class="search">
      <div class="search-headline">
          <div class="inpBox">
              
              <i class="cc- cc-sousuo"></i>
              <input type="text" confirmText="搜索" @input="inpChange"  @focus="inpfocus" v-model="keyWord" @confirm="searchConfirm" placeholder="请输入关键字">
              <i class="cc- cc-shanchu1" @click="removeKey" v-show="keyWord"></i>
          </div>
          <span @click="clearAll">取消</span>
      </div>

      <!-- 输入提示框 -->
      <div class="tipsContainer" v-if="keyWord">
          <div class="hasData" v-if="tipsDate.length > 0">
              <p v-for="(item,index) in tipsDate" :key="index" @click="selectTips" :data-value="item.name">
                  {{item.name}}
              </p>
          </div>
          <div class="nothing" v-else>
              暂时无您想要的商品...
          </div>
      </div>
      <div class="history">
          <div class="history-head">
              <span>历史记录</span>
              <i class="cc- cc-shanchu" @click="clearHistory"></i>
          </div>
          <div class="history-detail">
              <p v-for="(item,index) in hostory" :key="index"  @click="searchConfirm" :data-value="item.keyword">{{item.keyword}}</p>
          </div>
      </div>
      <div class="history hot">
          <div class="history-head">
              <span>热门搜索</span>
              
          </div>
          <div class="history-detail">
              <p :class="{active:item.is_default == 1}" v-for="(item,index) in hotList" :key="index" @click="searchConfirm" :data-value="item.keyword">{{item.keyword}}</p>
          </div>
          
      </div>

      <!-- 商品展示 -->
      <div class="showGoods" v-if="showGoods.length !== 0">
          <div class="headline">
              <div @click="toggleSelect(0)" :class="{showActive:choseClass==0}">综合</div>
              <div class="price" @click="toggleSelect(1)" :class="[order,{showActive:choseClass==1}]">
                  价格
                  <img alt="">
    
                    
                    <!-- <div class="pic">
                    <img v-if="order=='default'" src="../../../static/images/od_default.png" alt="">
                    <img v-if="order=='up'" src="../../../static/images/od_up.png" alt="">
                    <img v-if="order=='down'" src="../../../static/images/dow.png" alt="">
                    
                  </div> -->
               </div>
              <div @click="toggleSelect(2)" :class="{showActive:choseClass==2}">分类</div>
          </div>
          <div class="goodsContainer">
              <div class="item" v-for="(item,index) in showGoods" :key="index" @click="toGoodsDetail(item)">
                  <img :src="item.list_pic_url" >
                  <p class="title">{{item.name}}</p>
                  <p class="retail">￥{{item.retail_price}}</p>
              </div>
          </div>
      </div>


  </div>
</template>

<script>

export default {
    data(){
        return{
            active:2,
            keyWord:'',
            
            hostory:[],
            hotList:[],
            id:'',
            // 输入提示
            tipsDate:[],
            // 展示搜索到的部品
            showGoods:[],
            timer:'',
            //价格排序 
            order:'',
            choseClass:0

            

        }
    },
    methods:{
        removeKey(){
            this.keyWord = ''
        },
       async getHistoryAndKeywords(){
           this.id = wx.getStorageSync('openId') || '';
           let result = await this.$api.search.reqHistoryAndKeywords(this.id)
           
           if(result.status === 200){
               this.hostory = result.history
               this.hotList = result.hotList
           }
        },
        // 回车保存搜索记录
       async searchConfirm(e){
            let keyword =e.target.dataset.value || this.keyWord  
            this.keyWord = keyword
            let result = await this.$api.search.reqSavehistory({id:this.id,keyword})
            
            this.getHistoryAndKeywords()
            this.selectSearch()

            
       },

        // 点击选中搜索,展示搜索到的部品
        async selectSearch(){
            
            let result =await this.$api.search.reqSearchKeyWord({
                keyword:this.keyWord,
                order:this.order
            })    
            // 把返回来的数据 展示窗
            this.showGoods = result.data
            this.tipsDate = []
        },


        // 清除记录
       async clearHistory(){
            let result = await this.$api.search.reqClearHistory({id:this.id})
            this.hostory = []
        },

        // 输入防抖
       inpChange(){

            if(this.timer){
                clearTimeout(this.timer)
                this.timer = null
            }
            this.timer = setTimeout(()=>{
                // 对关键字搜索
               this.search()
            },1000)
         
        },

        // 关键字搜索
        async search(){
            let id = this.id
            let keyword = this.keyWord            
            let result =  await this.$api.search.reqSearchKeyWord({id,keyword})
            this.tipsDate = result.data
        },
        
        clearAll(){
            // this.keyWord='',
            // this.id='',
            // // 输入提示
            // this.tipsDate=[],
            // // 展示搜索到的部品
            // this.showGoods=[]
            mpwx.navigateBack({
              delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
            });
        },
        // 切换组
        async toggleSelect(index){
            this.choseClass = index
            if(this.choseClass == 1){
                this.order = this.order === 'desc'?'asc':'desc'
            }else{
                this.order = ''
            }
            // 整理Order 请求数据
            let reorder = this.choseClass + ":" + this.order
            let result = await this.$api.search.reqSearchKeyWord({
                keyword:this.keyWord,
                order:reorder
                })
            if(result.status === 200){
                this.showGoods = result.data
            }
        },

        // 聚焦事件
        inpfocus(){
            this.showGoods = []
        },

        // tips选中提示
        selectTips(e){
            this.keyWord = e.target.dataset.value
            this.search()

            
        },
        toGoodsDetail(item){
            wx.navigateTo({ url: '/pages/detail/main?goodsId='+item.id });
        }
        
    },
    mounted(){
        this.getHistoryAndKeywords()
    }

}
</script>

<style lang="less" scoped>
@import './index.less';
</style>